<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实现网站动态信息滚动与等待的交替效果</title>

<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

<style>

.banner01_r {
	float: right; overflow: hidden; width: 189px; margin-right: 0px
}

.l_news {
	background: url(images/right-bg.gif) no-repeat;
}

.l_news {
	background-position: 0px -152px; margin-right: 1px; height: 118px
}


.new_padding {
	padding-right: 5px; padding-left: 5px; padding-bottom: 10px; padding-top: 42px
}

.area_padding {
	
	overflow: hidden; line-height: 20px; position: relative; height: 60px
}

.l_news .list {
	overflow: hidden;
	line-height: 20px;
	position: absolute;
	top: 0px;
	height: 200px;
	left: -35px;
}

.l_news .list li {
	background-position: -310px -201px;
	margin-left: 0px;
	text-indent: 0;
}

</style>

</head>

<body>

<div class="banner01_r" style="float: left; width: 195px;">
  <div class="l_news">
    <div class="new_padding">
    <div class="area_padding" id="areaTrends">
    <ul class="list" id="trends" name="trends">
      <li style="font-weight: bold; color: #000000">银行汇款账号变更</li>
      <li style="font-weight: bold; color: #ff0000">卡莉芙面膜分享心得 赢豪礼</li>
      <li style="font-weight: bold; color: #000000">狂欢大放价2折起 满再减</li>
      <li style="font-weight: bold; color: #ff0000">天天网荣膺消费者喜爱网站</li>
      <li style="font-weight: bold; color: #000000">天天网防诈骗公告</li>
      <li style="font-weight: bold; color: #ff0000">韩妆集结号 全网五折封顶抢</li></ul>
    </div>
    </div>
  </div>
</div>
  
<script type="text/javascript">
var trendsroll = function() {
    var _w = $("#areaTrends").height(), _showbox_week = $("#trends");
    _showbox_week.animate({ top: "-=" + _w  }, 1000, function() {
	_showbox_week.find("li:first").before(_showbox_week.find("li:gt(2)"));
	_showbox_week.css("top", "0") ; 
  })
};
setInterval(trendsroll, 5000);
</script>
  
</body>
</html>
